<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./scripts/jsencrypt.min.js"></script>
    <script src="./scripts/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <form action="" method="post" id="loginForm">
            <input type="text" name="uname" id="uname">
            <input type="password" name="pwd" id="pwd">
            <button type="submit"> 登录</button>
        </form>
    </div>
    <script>
        const loginForm = document.getElementById('loginForm');

        loginForm.addEventListener('submit', async function (event) {
            event.preventDefault();

            const encrypt = new JSEncrypt();
            const key = `
                -----BEGIN PUBLIC KEY-----
                MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQD3EO65hE1Q5im0z4xIl0ViPEnU
                GmvUTM63/2Um8HlpYJlyym/xH+7RhvjiuzDxxFcdAeZrqe6hOQRswS4NK46vgX26
                EiNSndrtrmFOH5TDRfbUtEpvAb0NCDIHDvmvcfZd0m/gtZ37Zk0WMIExki5RO2XD
                i+nQmn6oUnzjyXigYQIDAQAB
                -----END PUBLIC KEY-----
            `;
            encrypt.setPublicKey(key);

            const uname = loginForm['uname'].value;
            const pwd = encrypt.encrypt(loginForm['pwd'].value);
            
            try {
                let res = await axios({
                    method: 'post',
                    url: '/login',
                    data: {
                        uname,
                        pwd
                    }
                });
                console.log(res.data);
            } catch (error) {
                console.error(error);
            }
        });
    </script>
</body>

</html>